<template>
  <div class="article-manager">
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="artFrom"
        :model="artFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <!-- -1已取消 0待报价 1 已报价(待支付) 2待支付尾款 3已完成(待评价) 4已评价-->
            <FormItem label="包车状态：" label-for="pid">
              <Select v-model="artFrom.status"   placeholder="请选择包车状态">
                <Option label="已取消" :value="-1" />
                <Option label="待报价" :value="0" />
                <Option label="待支付定金" :value="1" />
                <Option  label="待支付尾款" :value="2" />
                <Option label="待评价" :value="3" />
                <Option label="已完成" :value="4" />   
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <!-- -1已取消 0待报价 1 已报价(待支付) 2待支付尾款 3已完成(待评价) 4已评价-->
            <FormItem label="包车类型：" label-for="pid">
              <Select v-model="artFrom.type"   placeholder="请选择包车类型">
                <Option label="所有" :value="0" />
                <Option label="单程" :value="1" />
                <Option  label="往返" :value="2" />
                <Option label="包天" :value="3" />
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="包车搜索：" label-for="line_name">
              <Input
                search
                enter-button
                placeholder="请输入包车人姓名、手机号"
                v-model="artFrom.keyword"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Table
        ref="table"
        :columns="columns"
        :data="tableList"
        class="ivu-mt"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
      
        <template slot-scope="{ row, index }" slot="action">
          <a @click="baojia(row)">立即报价</a>
          <Divider type="vertical" />
           <a  @click="payListClick(row)">支付状态</a>
        </template>

      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page" 
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>

      <Modal title="立即报价" width="35%" v-model="priceListVisible" ok-text="立即报价" 	 scrollable   :mask-closable="false"  :z-index="1"  @on-cancel="closePriceForm()"  @on-ok="submPriceForm()" >
        <Row  justify="space-between" style="justify-content: center;">
    
          <div style="display: flex;flex-direction: column;margin-bottom: 40px;align-items: center;margin-top:40px">
            <div  style="display: flex;flex-direction: row;margin-bottom:15px;justify-content: flex-start;align-items: center;">
              <span style="color:red">*</span>
              <div style="width: 240px;">总价:</div>
               <InputNumber :min="0" v-model="price" style='margin-left:15px' ></InputNumber>
            </div>
            <div  style="display: flex;flex-direction: row;margin-bottom:15px;justify-content: flex-start;align-items: center;">
              <span style="color:red">*</span>
              <div style="width: 240px;">定金:</div>
              <InputNumber :min="0" v-model="t_price" style='margin-left:15px' ></InputNumber>
            </div>
            <div  style="display: flex;flex-direction: row;margin-bottom:15px;justify-content: flex-start;align-items: center;">
              <span style="color:red">*</span>
              <div style="width: 240px;">尾款:</div>
               <InputNumber :min="0" v-model="w_price" style='margin-left:15px' ></InputNumber>
            </div>
          </div>
      </Row>
      </Modal>


      <Modal title="支付状态" width="65%" v-model="orderVisible" footer-hide	 scrollable   :mask-closable="false"  :z-index="1">
        <Table 
         ref="table"
        :columns="columns2"
        :data="orderList"
        class="ivu-mt"
        highlight-row
        no-data-text="无订单信息"
        no-filtered-data-text="暂无订单信息"
        >
        <template slot-scope="{ row,index }" slot="order_type">
            <span>{{row.order_type ? '尾款' : '定金'}}</span>
        </template>
        <template slot-scope="{ row,index }" slot="refund_status">
           <span>{{row.refund_status==0 ? '未退款' : '已退款'}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a @click="tuikuan(row)">退款</a>
        </template>
        </Table>
      </Modal>


      <!-- 立即退款 -->
      <Modal
        v-model="refundShow"
        title="退款处理"
        ok-text="提交退款"
        @on-ok="sumRefund"
        @on-cancel="cancelRefund">
        <Form ref="refundForm" :model="refundForm" :label-width="120" class="demo-ruleForm">
          <FormItem label="订单号:">
            <Input v-model="refundForm.order_id" disabled  />
          </FormItem>
          <FormItem label="退款金额:">
            <InputNumber  :min="0" :max="Maxprice" v-model="refundForm.refund_price"></InputNumber>
          </FormItem>
          <FormItem label="退款理由:">
            <Input v-model="refundForm.refund_reason_wap_explain" type="textarea" :autosize="true" placeholder="请输入退款理由" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 立即退款 -->

    </Card>

  </div>
</template>

<script>
import toExcel from "../../../utils/Excel.js";
import { mapState } from "vuex";
import {adminInfoApi} from "@/api/setting"
import uploadPictures from "@/components/uploadPictures";
import VueUeditorWrap from "vue-ueditor-wrap";
import {
  getBaocheList,
  saveBaochePriceApi,
} from "@/api/line";

import {
  orderBaocheRefund,
} from "@/api/order";


import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "custom_busList",
  components: { uploadPictures,VueUeditorWrap},
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/userLevel", ["categoryId"]),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  data() {
    return {
      Maxprice:0,
      refundForm:{
          order_id:'',
          refund_price:0,
          refund_reason_wap_explain:''
        },
      refundShow: false,
      orderVisible: false,
      orderList:[],
      baocheId:0,
      price: 0,
      t_price: 0,
      w_price: 0,
      artFrom: {
        page: 1,
        limit: 25,
        status: 0,
        excel: 0,
        type: 0,
        keyword: '',
      },
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      list: [],
      tableList: [],
      headeNum: [],
      treeSelect: [],
      loading: false,
      columns: [
     
        {
          title: "包车ID",
          key: "baoche_id",
          width: 120,
        },
        {
          title: "包车类型",
          key: "type_desc",
          width: 100,
        },
        {
          title: "姓名",
          key: "name",
          width: 100,
        },
        {
          title: "手机号",
          key: "phone",
          width: 100,
        },
        {
          title: "出发地",
          key: "origin",
          minWidth: 200,
        },
        {
          title: "目的地",
          key: "destination",
          minWidth: 200,
        },
        {
          title: "用车类型",
          key: "car_type",
          minWidth: 150,
        },
        {
          title: "用车人数",
          key: "people_sum",
          minWidth: 200,
        },
        {
          title: "出发时间",
          key: "go_time",
          minWidth: 120,
        },
        {
          title: "返程时间",
          key: "back_time",
          minWidth: 120,
        },
        {
          title: "用车天数",
          key: "discount_price",
          minWidth: 6,
        },
       
        {
          title: "状态",
          key: "status_desc",
          width: 60,
        },
        
      
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 220,
        },
      ],
      
      columns2: [
        {
          title: "订单号",
          key: "order_id",
          width: 180,
        },
        
        {
          title: "包车Id",
          key: "baoche_id",
          width: 180,
        },
        {
          title: "订单类型",
          slot: "order_type",
          minWidth: 60,
        },
        {
          title: "实付款",
          key: "pay_price",
          width: 60,
        },
        {
          title: "订单总价",
          key: "total_price",
          width: 60,
        },
        {
          title: "退款状态",
          slot: "refund_status",
          minWidth: 60,
        },
        {
          title: "退款金额",
          key: "refund_price",
          minWidth: 100,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 100,
        },
      ],
   
      data: [],
      total: 0,
      attrTemplate: false,
      ids: [],
      display: "none",
      formSelection: [],
      selectionCopy: [],
      checkBox: false,
      isAll: -1,
      priceListVisible: false,
      // activeKey:1
    };
  },
  watch: {
    $route() {

    },
    formSelection(value) {
    },
    tableList: {
      deep: true,
      handler(value) {
        value.forEach((item) => {
          this.formSelection.forEach((itm) => {
            if (itm.id === item.id) {
              item.checkBox = true;
            }
          });
        });
        const arr = this.tableList.filter((item) => item.checkBox);
        if (this.tableList.length) {
          this.checkBox = this.tableList.length === arr.length;
        } else {
          this.checkBox = false;
        }
      },
    },
  },
  created() {
  },
  mounted() {

    // if (this.$route.fullPath === "/admin/line/custom_bus_list?status=1") {
    //   this.getPath();
    // } else {
    //   this.getDataList();
    // }
    
     this.getAdminInfo()
    // this.getDataList();
  },
  methods: {

    // 退款
    tuikuan(item){
        var price = 0
        if(item.total_price-item.refund_price<=0) {
          price = 0
        } else {
         price = item.total_price-item.refund_price
        }
        this.Maxprice = price
        this.refundForm = {
          order_id:item.order_id,
          refund_price: price,
          refund_reason_wap_explain:''
        }
        this.refundShow = true
      },
      // 提交退款
      sumRefund(){
        if(this.refundForm.refund_price<=0) {
          this.$Message.error('退款不能小于等于0')
        } else{
          orderBaocheRefund(this.refundForm).then(async (res) => {            
            this.getDataList();
            this.refundShow = false
            this.orderVisible = false
            this.$Message.success(res.msg);      
        }).catch((res) => {
          this.loading = false;
            this.$Message.error(res.msg);
        });
        }
        //TODO
      },
    cancelRefund(){
        this.refundForm = {
          order_id:'',
          refund_price:'',
          refund_reason_wap_explain:''
        }
      },
    payListClick(item){
      this.orderList = item.OrderBaoche
      this.orderVisible = true

    },
  
    baojia(item){
      this.baocheId = item.baoche_id
      this.price = item.price
      this.t_price = item.t_price
      this.w_price = item.w_price
      this.priceListVisible = true
    },
  
 


    closePriceForm(){
     
      this.priceListVisible = false
    },

    submPriceForm(){
      var data = {
          baoche_id: this.baocheId,
          price: this.price,
          t_price: this.t_price,
          w_price: this.w_price
        }
        if(!this.baocheId){
          this.$Message.error('参数错误')
        }
        if(!this.price){
          this.$Message.error('请填写包车总价')
        }
        if(!this.t_price){
          this.$Message.error('请填写包车定金')
        }
        if(!this.w_price){
          this.$Message.error('请填写包车尾款')
        }
        saveBaochePriceApi(data).then(res => {
            this.$Message.success('报价成功')
            this.getDataList();
          }).catch(error => {
            this.$Message.error(error)
          })

    },
 // 获取单张图片信息
 getPic(pc) {
      switch (this.picTit) {
        case "danFrom":
          this.detailForm.image = pc.att_dir;
          break;

      }
      this.modalPic = false;
      console.log(333,this.detailForm)

    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.detailForm.slider_image.push(item.att_dir);
        this.detailForm.slider_image = this.detailForm.slider_image.splice(
          0,
          10
        );
      });
      this.modalPic = false;
      console.log(555,this.detailForm)

    },
     // 添加自定义弹窗
     addCustomDialog(editorId) {
      window.UE.registerUI(
        "test-dialog",
        function (editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: "/admin/widget.images/index.html?fodder=dialog",
            editor: editor,
            name: uiName,
            title: "上传图片",
            cssRules: "width:1200px;height:500px;padding:20px;",
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        37
      );
      window.UE.registerUI(
        "video-dialog",
        function (editor, uiName) {
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: "/admin/widget.video/index.html?fodder=video",
            editor: editor,
            name: uiName,
            title: "上传视频",
            cssRules: "width:1000px;height:500px;padding:20px;",
          });
          this.dialog = dialog;
          let btn = new window.UE.ui.Button({
            name: "video-button",
            title: "上传视频",
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render();
              dialog.open();
            },
          });
          return btn;
        },
        38
      );
    },
   // h获取管理员信息
    getAdminInfo(){
      adminInfoApi().then((res) => {
          this.cityList = res.data.admin_roles_info
          if(res.status==200){
             this.getDataList();
          }
        })
        .catch((error) => {
          console.log(error)
          this.$Message.error(error.msg||'错误请求')
        });
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.detailForm.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.detailForm.slider_image = newItems;
    },
    handleRemove(i) {
      this.images.splice(i, 1);
      this.detailForm.slider_image.splice(i, 1);
    },
    changeSort(item){
      console.log(2222,item)
      if(item.sort == null || item.sort == ''){
        return ;
      }
      var post = {
        id: item.id,
        sort: item.sort

      }
      this.loading = true;
      changeLineSortApi(post).then((res) => {
         
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
      // 选择城市触发
    selectCity(id) {
      var city = {}
      this.cityList.forEach(function(item) {
        if (item.city_id === id) {
          city = item
        }
      })
      var that = this
      if (!city.company_ids) {
        that.$Message.error('该城市下没有公司,请前往维护管理添加公司！')
        return
      }
      that.companyList = city.company_list
    },

 
    // 数据导出；
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let formValidate = this.artFrom;
      let lebData = await this.getExcelData(formValidate);
  
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },
    getExcelData(excelData) {
      return new Promise((resolve, reject) => {
        exportLineListApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
    changeTemplate(e) {
      // this.template = e;
    },
    freight() {
      this.$refs.template.isTemplate = true;
    },
   
 
    
  
    // 线路列表；
    getDataList() {
      this.loading = true;
      getBaocheList(this.artFrom)
        .then((res) => {
          let data = res.data;
          this.tableList = data.list.map((item) => {
            if (this.isAll === 1) {
              item.checkBox = true;
            } else {
              item.checkBox = false;
            }
            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
      this.$refs.table.clearCurrentRow();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.formSelection = [];
      this.getDataList();
    },
    
    
    
    // 排序
    sortChanged(e) {
      this.artFrom[e.key] = e.order;
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-modal-mask {
  z-index: 999 !important;
}

/deep/.ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  >>> .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.ivu-table-cell-expand-expanded {
  margin-top: -6px;
  margin-right: 33px;
  transition: none;

  .ivu-icon {
    vertical-align: 2px;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}

.pictrueBox {
  display: inline-block;
}

.pictrueTab {
  width: 40px !important;
  height: 40px !important;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.curs {
  cursor: pointer;
}

.inpWith {
  width: 60%;
}

.labeltop {
  >>> .ivu-form-item-label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
}

.video-icon {
  background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png'); // cdn.oss.9gt.net/prov1.1/1/icons.png);
  background-color: #fff;
  background-position: -9999px;
  background-repeat: no-repeat;
}
</style>
